<template>
	<view class="mainPage combination" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="withdrawalaccount" v-if="bankcardlist.length>0">
			<view class="bankcard" v-for="(item,index) in bankcardlist" :key="index">
				<view class="banktop">
					<view class="name">{{item.bank_name}}</view>
					<view class="img" @click="Unbundling(item.id,item.bank_phone)">
						<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/image/more.png"></image>
					</view>
				</view>
				<view class="bankfoot">**** **** **** {{item.compact_bank_name}}</view>
			</view>
			<view class="addbankcard" @click="toaddcard">
				<view>
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/icon_add.png"></image>
				</view>
				<view>添加银行卡</view>
			</view>
		</view>
		<view class="emptystate" v-else>
			<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/image/icon_empty_bankcard.png"></image>
			<view class="title">暂无提现账户</view>
			<view class="bottom" @click="toaddcard">
				<button>+ 添加银行卡</button>
			</view>
		</view>
		<!--  -->
		<u-popup class="u-popup nobgPopup" v-model="verificationshow" mode="center" border-radius="14" :closeable="true" width="670rpx" height="180px">
			<scroll-view scroll-y="true">
				<view class="popuptitle">解除绑定验证</view>
				<view class="verifymobile">{{bank_phone}}</view>
				<view class="form">
					<view>
						<wakary-input type="box" @finish="finishedOne"></wakary-input>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup class="u-popup nobgPopup" v-model="relieveshow" mode="bottom" border-radius="16">
			<view class="anniu-box">
				<view class="queren" @click="queren">
					解除绑定
				</view>
				<view class="quxiao" @click="quxiao">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
var that
import wakaryInput from '../../../components/wakary-input/wakary-input.vue'
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead,
		wakaryInput
	},
	data() {
		return {
			title: "提现账户",
			relieveshow: false,
			verificationshow: false,
			codes: '',
			bankcardlist: '',
			name: '',
			id: '',
			bank_phone: '',
			page: 1
		}
	},
	onLoad(e) {
		that = this
		that.name = e.name
	},
	onShow() {
		that.banklist()
	},
	methods: {
		toaddcard() {
			uni.navigateTo({
				url: 'addcard?name=' + that.name
			})
		},
		Unbundling(id, bank_phone) {
			that.relieveshow = true
			that.id = id
			that.bank_phone = bank_phone
		},
		quxiao() {
			that.relieveshow = false

		},
		queren() {
			that.relieveshow = false
			that.verificationshow = true
			that.$postAjax1('Doc_Cash_getJBindBackCode', {
				back_id: that.id
			}, function (data) {
				console.log('获取验证码成功')
			})
		},
		finishedOne(val) {
			that.codes = val
			console.log(val)
			if (that.codes.length == 6) {
				that.$postAjax1('Doc_Cash_delBank', {
					back_id: that.id,
					code: that.codes
				}, function (data) {
					uni.hideKeyboard();
					that.verificationshow = false
					uni.showToast({
						title: '解绑成功',
						icon: 'none',
						duration: 2000
					});
					that.banklist()
					console.log('解绑成功')
				})
			}
		},
		codeChange(text) {
			that.codeText = text;
			console.log(text)
		},
		banklist() {
			that.$postAjax1('Doc_Cash_getBackList', {
				page: that.page,
				limit: 10,
			}, function (data) {
				that.bankcardlist = data.data.data
				console.log('银行卡', that.bankcardlist)
			})
		}
	},
}
</script>
<style scoped lang="scss">
.withdrawalaccount {
	background-color: #f4f4f4;
	min-height: 100vh;
	padding: 24rpx 32rpx;
	.bankcard {
		background-image: url(https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/image/bankcard.png);
		background-size: cover;
		box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.18);
		border-radius: 16rpx;
		padding: 30rpx 40rpx;
		min-height: 240rpx;
		margin-bottom: 20rpx;
		.banktop {
			display: flex;
			justify-content: space-between;
			padding-bottom: 33rpx;
			.name {
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
			}
			.img {
				image {
					width: 30rpx;
					height: 6rpx;
				}
			}
		}
		.bankfoot {
			font-size: 48rpx;
			color: #ffffff;
			font-weight: 500;
			padding: 33rpx 0 4rpx 0;
		}
	}
	.addbankcard {
		display: flex;
		align-items: center;
		background: #ffffff;
		box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.18);
		border-radius: 16rpx;
		padding: 46rpx 240rpx;
		font-size: 30rpx;
		color: #1e1e1e;
		margin-top: 16rpx;
		margin-bottom: 30rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-top: 6rpx;
			margin-right: 14rpx;
		}
	}
}
.emptystate {
	background-color: #f4f4f4;
	min-height: 100vh;
	image {
		width: 354rpx;
		height: 250rpx;
		margin: 384rpx 160rpx 30rpx 160rpx;
	}
	.title {
		font-size: 32rpx;
		color: #909090;
		margin: 0rpx 160rpx 0rpx 160rpx;
		text-align: center;
	}
	.bottom {
		background: #ffffff;
		position: fixed;
		bottom: 0;
		width: 100%;
		button {
			background: linear-gradient(270deg, #f78361 0%, #f54b64 100%);
			box-shadow: 0px 6rpx 8rpx 0px rgba(246, 80, 100, 0.2);
			border-radius: 46rpx;
			color: #ffffff;
			font-size: 32rpx;
			margin: 30rpx 60rpx 108rpx 60rpx;
			line-height: 92rpx;
		}
	}
}
.u-popup {
	.anniu-box {
		background-color: transparent;
		padding: 0 22rpx 0rpx;
		// margin-bottom: 50rpx;
		padding-bottom: 50rpx;
		.queren {
			width: 100%;
			height: 106rpx;
			background: #efefef;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			// color: #E02020;
			line-height: 106rpx;
			margin-bottom: 16rpx;
		}
		.quxiao {
			width: 100%;
			height: 106rpx;
			background: #efefef;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 106rpx;
			// color: #2F78F3;
		}
	}
	.popuptitle {
		text-align: center;
		font-size: 30rpx;
		color: #1e1e1e;
		margin-top: 40rpx;
	}
	.verifymobile {
		font-size: 28rpx;
		color: #909090;
		margin-top: 40rpx;
		text-align: center;
	}
	.form {
		margin: 16rpx 32rpx 0 32rpx;
	}
}
</style>
